JavaScript Proxy Patterns: Разширено прихващане и валидиране на обекти

JavaScript Proxy обектът е мощна функция, която ви позволява да прихващате и персонализирате основни операции с обекти. Той дава възможност за разширени техники за метапрограмиране, предлагайки по-голям контрол върху поведението на обектите и отваряйки възможности за сложни шаблони за дизайн. Тази статия изследва различни Proxy patterns, показвайки техните случаи на употреба при валидиране, прихващане и модифициране на динамично поведение. Ще се потопим в практически примери, за да демонстрираме как Proxies могат да подобрят качеството на кода, сигурността и поддръжката във вашите JavaScript проекти.

Разбиране на JavaScript Proxy

В основата си, Proxy обектът обвива друг обект (целта) и прихваща операции, извършени върху тази цел. Тези прихващания се обработват от traps, които са методи, определящи персонализирано поведение за специфични операции, като получаване на свойство, задаване на свойство или извикване на функция. Proxy API предоставя гъвкав и разширяем механизъм за промяна на поведението по подразбиране на обектите.

Основни концепции

• Target: Оригиналният обект, който Proxy обвива.
• Handler: Обект, който съдържа trap методите. Всеки trap съответства на специфична операция.
• Traps: Методи в рамките на handler, които прихващат и персонализират операции с обекти. Често срещани traps включват get, set, apply и construct.

Създаване на Proxy

За да създадете Proxy, използвате Proxy конструктора, предавайки целевия обект и handler обекта като аргументи:

            const target = {};
const handler = {
 get: function(target, property, receiver) {
 console.log(`Getting property: ${property}`);
 return Reflect.get(target, property, receiver);
 }
};

const proxy = new Proxy(target, handler);

proxy.name = "John"; // Logs: Getting property: name
console.log(proxy.name); // Logs: Getting property: name, then John

            

              
                Copy
              
            
          

Често срещани Proxy Traps

Proxies предлагат набор от traps за прихващане на различни операции. Ето някои от най-често използваните traps:

• get(target, property, receiver): Прихваща достъпа до свойства.
• set(target, property, value, receiver): Прихваща присвояването на свойства.
• has(target, property): Прихваща in оператора.
• deleteProperty(target, property): Прихваща delete оператора.
• apply(target, thisArg, argumentsList): Прихваща извикванията на функции.
• construct(target, argumentsList, newTarget): Прихваща new оператора.
• getPrototypeOf(target): Прихваща Object.getPrototypeOf() метода.
• setPrototypeOf(target, prototype): Прихваща Object.setPrototypeOf() метода.
• isExtensible(target): Прихваща Object.isExtensible() метода.
• preventExtensions(target): Прихваща Object.preventExtensions() метода.
• getOwnPropertyDescriptor(target, property): Прихваща Object.getOwnPropertyDescriptor() метода.
• defineProperty(target, property, descriptor): Прихваща Object.defineProperty() метода.
• ownKeys(target): Прихваща Object.getOwnPropertyNames() и Object.getOwnPropertySymbols() методите.

Proxy Patterns

Сега, нека разгледаме някои практически Proxy patterns и техните приложения:

1. Validation Proxy

Validation Proxy налага ограничения върху присвояванията на свойства. Той прихваща set trap, за да валидира новата стойност, преди да позволи присвояването да продължи.

Пример: Валидиране на потребителски вход във формуляр.

            const user = {};

const validator = {
 set: function(target, property, value) {
 if (property === 'age') {
 if (!Number.isInteger(value) || value < 0 || value > 120) {
 throw new Error('Invalid age. Age must be an integer between 0 and 120.');
 }
 }
 target[property] = value;
 return true; // Indicate success
 }
};

const proxy = new Proxy(user, validator);

proxy.name = 'Alice';
proxy.age = 30;

console.log(user);

try {
 proxy.age = 'invalid'; // Throws an error
} catch (error) {
 console.error(error.message);
}

            

              
                Copy
              
            
          

В този пример, set trap проверява дали свойството age е цяло число между 0 и 120. Ако валидирането не успее, се изхвърля грешка, предотвратявайки присвояването на невалидната стойност.

Global Example: This validation pattern is essential for ensuring data integrity in global applications where user input may come from diverse sources and cultures. For instance, validating postal codes can vary significantly between countries. A validation proxy can be adapted to support different validation rules based on the user's location.

            const address = {};

const addressValidator = {
 set: function(target, property, value) {
 if (property === 'postalCode') {
 // Example: Assuming a simple US postal code validation
 if (!/^[0-9]{5}(?:-[0-9]{4})?$/.test(value)) {
 throw new Error('Invalid US postal code.');
 }
 }
 target[property] = value;
 return true;
 }
};

const addressProxy = new Proxy(address, addressValidator);

addressProxy.postalCode = "12345-6789"; // Valid

try {
 addressProxy.postalCode = "abcde"; // Invalid
} catch(e) {
 console.log(e);
}

// For a more international application, you'd use a more sophisticated validation library
// that could validate postal codes based on the user's country.

            

              
                Copy
              
            
          

2. Logging Proxy

Logging Proxy прихваща достъп до свойства и присвояване, за да регистрира тези операции. Той е полезен за отстраняване на грешки и одит.

Пример: Регистриране на достъп до свойства и модификация.

            const data = {
 value: 10
};

const logger = {
 get: function(target, property) {
 console.log(`Getting property: ${property}`);
 return target[property];
 },
 set: function(target, property, value) {
 console.log(`Setting property: ${property} to ${value}`);
 target[property] = value;
 return true;
 }
};

const proxy = new Proxy(data, logger);

console.log(proxy.value); // Logs: Getting property: value, then 10
proxy.value = 20; // Logs: Setting property: value to 20

            

              
                Copy
              
            
          

get и set traps регистрират свойството, до което се осъществява достъп или се модифицира, предоставяйки следа от взаимодействията с обекта.

Global Example: In a multinational corporation, logging proxies can be used to audit data access and modifications performed by employees in different locations. This is crucial for compliance and security purposes. Timezones may need to be considered in the logging information.

            const employeeData = {
 name: "John Doe",
 salary: 50000
};

const auditLogger = {
 get: function(target, property) {
 const timestamp = new Date().toISOString();
 console.log(`${timestamp} - [GET] Accessing property: ${property}`);
 return target[property];
 },
 set: function(target, property, value) {
 const timestamp = new Date().toISOString();
 console.log(`${timestamp} - [SET] Setting property: ${property} to ${value}`);
 target[property] = value;
 return true;
 }
};

const proxiedEmployee = new Proxy(employeeData, auditLogger);

proxiedEmployee.name; // Logs timestamp and access to 'name'
proxiedEmployee.salary = 60000; // Logs timestamp and modification of 'salary'
            

              
                Copy
              
            
          

3. Read-Only Proxy

Read-Only Proxy предотвратява присвояването на свойства. Той прихваща set trap и изхвърля грешка, ако е направен опит за модифициране на свойство.

Пример: Превръщане на обект в непроменим.

            const config = {
 apiUrl: 'https://api.example.com'
};

const readOnly = {
 set: function(target, property, value) {
 throw new Error(`Cannot set property: ${property}. Object is read-only.`);
 }
};

const proxy = new Proxy(config, readOnly);

console.log(proxy.apiUrl);

try {
 proxy.apiUrl = 'https://newapi.example.com'; // Throws an error
} catch (error) {
 console.error(error.message);
}

            

              
                Copy
              
            
          

Всеки опит за задаване на свойство на proxy ще доведе до грешка, гарантирайки, че обектът остава непроменим.

Global Example: This pattern is useful for protecting configuration files that should not be modified at runtime, especially in globally distributed applications. Accidentally modifying configuration in one region can affect the entire system.

            const globalSettings = {
 defaultLanguage: "en",
 currency: "USD",
 timeZone: "UTC"
};

const immutableHandler = {
 set: function(target, property, value) {
 throw new Error(`Cannot modify read-only property: ${property}`);
 }
};

const immutableSettings = new Proxy(globalSettings, immutableHandler);

console.log(immutableSettings.defaultLanguage); // outputs 'en'

// Attempting to change a value will throw an error
// immutableSettings.defaultLanguage = "fr"; // throws Error: Cannot modify read-only property: defaultLanguage
            

              
                Copy
              
            
          

4. Virtual Proxy

Virtual Proxy контролира достъпа до ресурс, който може да е скъп за създаване или извличане. Той може да забави създаването на ресурса, докато не е действително необходим.

Пример: Мързеливо зареждане на изображение.

            const image = {
 display: function() {
 console.log('Displaying image');
 }
};

const virtualProxy = {
 get: function(target, property) {
 if (property === 'display') {
 console.log('Creating image...');
 const realImage = {
 display: function() {
 console.log('Displaying real image');
 }
 };
 target.display = realImage.display;
 return realImage.display;
 }
 return target[property];
 }
};

const proxy = new Proxy(image, virtualProxy);

// The image is not created until display is called.
proxy.display(); // Logs: Creating image..., then Displaying real image

            

              
                Copy
              
            
          

Реалният обект на изображението се създава само когато се извика методът display, избягвайки ненужна консумация на ресурси.

Global Example: Consider a global e-commerce website that serves images of products. Using a Virtual Proxy, images can be loaded only when they are visible to the user, optimizing bandwidth usage and improving page load times, especially for users with slow internet connections in different regions.

            const product = {
 loadImage: function() {
 console.log("Loading high-resolution image...");
 // Simulate loading a large image
 setTimeout(() => {
 console.log("Image loaded");
 this.displayImage();
 }, 2000);
 },
 displayImage: function() {
 console.log("Displaying the image");
 }
};

const lazyLoadProxy = {
 get: function(target, property) {
 if (property === "displayImage") {
 // Instead of loading immediately, delay the loading
 console.log("Request to display image received. Loading...");
 target.loadImage();
 return function() { /* Intentionally Empty */ }; // Return empty function to prevent immediate execution
 }
 return target[property];
 }
};

const proxiedProduct = new Proxy(product, lazyLoadProxy);

// Call displayImage triggers the lazy loading process
proxiedProduct.displayImage();
            

              
                Copy
              
            
          

5. Revocable Proxy

Revocable Proxy ви позволява да отмените proxy по всяко време, правейки го неизползваем. Това е полезно за чувствителни към сигурността сценарии, където трябва да контролирате достъпа до обект.

Пример: Предоставяне на временен достъп до ресурс.

            const target = {
 secret: 'This is a secret'
};

const handler = {
 get: function(target, property) {
 console.log('Accessing secret property');
 return target[property];
 }
};

const { proxy, revoke } = Proxy.revocable(target, handler);

console.log(proxy.secret); // Logs: Accessing secret property, then This is a secret

revoke();

try {
 console.log(proxy.secret); // Throws a TypeError
} catch (error) {
 console.error(error.message); // Logs: Cannot perform 'get' on a proxy that has been revoked
}

            

              
                Copy
              
            
          

Методът Proxy.revocable() създава revocable proxy. Извикването на функцията revoke() прави proxy неизползваем, предотвратявайки по-нататъшен достъп до целевия обект.

Global Example: In a globally distributed system, you might use a revocable proxy to grant temporary access to sensitive data to a service running in a specific region. After a certain time, the proxy can be revoked to prevent unauthorized access.

            const sensitiveData = {
 apiKey: "SUPER_SECRET_KEY"
};

const handler = {
 get: function(target, property) {
 console.log("Accessing sensitive data");
 return target[property];
 }
};

const { proxy: dataProxy, revoke: revokeAccess } = Proxy.revocable(sensitiveData, handler);

// Allow access for 5 seconds
setTimeout(() => {
 revokeAccess();
 console.log("Access revoked");
}, 5000);

// Attempt to access data
console.log(dataProxy.apiKey); // Logs the API Key

// After 5 seconds, this will throw an error
setTimeout(() => {
 try {
 console.log(dataProxy.apiKey); // Throws: TypeError: Cannot perform 'get' on a proxy that has been revoked
 } catch (error) {
 console.error(error);
 }
}, 6000);

            

              
                Copy
              
            
          

6. Type Conversion Proxy

Type Conversion Proxy прихваща достъп до свойства, за да конвертира автоматично върнатата стойност в специфичен тип. Това може да бъде полезно за работа с данни от различни източници, които може да имат непоследователни типове.

Пример: Конвертиране на низови стойности в числа.

            const data = {
 price: '10.99',
 quantity: '5'
};

const typeConverter = {
 get: function(target, property) {
 const value = target[property];
 if (typeof value === 'string' && !isNaN(Number(value))) {
 return Number(value);
 }
 return value;
 }
};

const proxy = new Proxy(data, typeConverter);

console.log(proxy.price + 1); // Logs: 11.99 (number)
console.log(proxy.quantity * 2); // Logs: 10 (number)

            

              
                Copy
              
            
          

get trap проверява дали стойността на свойството е низ, който може да бъде конвертиран в число. Ако е така, той конвертира стойността в число, преди да я върне.

Global Example: When dealing with data coming from APIs with different formatting conventions (e.g., different date formats or currency symbols), a Type Conversion Proxy can ensure data consistency across your application, regardless of the source. For example, handling different date formats and converting them all to ISO 8601 format.

            const apiData = {
 dateUS: "12/31/2023",
 dateEU: "31/12/2023"
};

const dateFormatConverter = {
 get: function(target, property) {
 let value = target[property];
 if (property.startsWith("date")) {
 // Attempt to convert both US and EU date formats to ISO 8601
 if (property === "dateUS") {
 const [month, day, year] = value.split("/");
 value = `${year}-${month}-${day}`;
 } else if (property === "dateEU") {
 const [day, month, year] = value.split("/");
 value = `${year}-${month}-${day}`;
 }
 return value;
 }
 return value;
 }
};

const proxiedApiData = new Proxy(apiData, dateFormatConverter);

console.log(proxiedApiData.dateUS); // Outputs: 2023-12-31
console.log(proxiedApiData.dateEU); // Outputs: 2023-12-31
            

              
                Copy
              
            
          

Най-добри практики за използване на Proxies

• Използвайте Proxies разумно: Proxies могат да добавят сложност към вашия код. Използвайте ги само когато предоставят значителни ползи, като подобрено валидиране, регистриране или контрол върху поведението на обектите.
• Вземете предвид производителността: Proxy traps могат да въведат допълнителна работа. Профилирайте кода си, за да сте сигурни, че Proxies не влияят негативно на производителността, особено в критични за производителността секции.
• Обработвайте грешките грациозно: Уверете се, че вашите trap методи обработват грешките по подходящ начин, предоставяйки информативни съобщения за грешки, когато е необходимо.
• Използвайте Reflect API: Reflect API предоставя методи, които отразяват поведението по подразбиране на операциите с обекти. Използвайте Reflect методи в рамките на вашите trap методи, за да делегирате на оригиналното поведение, когато е подходящо. Това гарантира, че вашите traps не нарушават съществуващата функционалност.
• Документирайте вашите Proxies: Ясно документирайте целта и поведението на вашите Proxies, включително traps, които се използват и ограниченията, които се прилагат. Това ще помогне на други разработчици да разберат и поддържат вашия код.

Заключение

JavaScript Proxies са мощен инструмент за разширена манипулация и прихващане на обекти. Чрез разбиране и прилагане на различни Proxy patterns, можете да подобрите качеството на кода, сигурността и поддръжката. От валидиране на потребителски вход до контрол на достъпа до чувствителни ресурси, Proxies предлагат гъвкав и разширяем механизъм за персонализиране на поведението на обектите. Докато изследвате възможностите на Proxies, не забравяйте да ги използвате разумно и да документирате кода си старателно.

The examples provided demonstrate how to use JavaScript Proxies to solve real-world problems in a global context. By understanding and applying these patterns, you can create more robust, secure, and maintainable applications that meet the needs of a diverse user base. Remember to always consider the global implications of your code and adapt your solutions to the specific requirements of different regions and cultures.